<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
  <div class="al-sidebar-list-item" [hidden]="sidebarCollapsed">
    <a [routerLink]="['/options']" class="al-sidebar-user">
      <img src="{{ _appState.state.adminInfo.gravatar }}" class="al-sidebar-user-gravatar">
      <div class="al-sidebar-user-profile">
        <p class="al-sidebar-user-name">{{ _appState.state.adminInfo.name }}</p>
        <small class="al-sidebar-user-slogan text-muted">{{ _appState.state.adminInfo.slogan }}</small>
      </div>
    </a>
  </div>
  <ul id="al-sidebar-list" 
      class="al-sidebar-list" 
      baSlimScroll 
      [baSlimScrollOptions]="{ height: menuHeight }">
    <ba-menu-item
      [menuItem]="item"
      (itemHover)="hoverItem($event)"
      (toggleSubMenu)="toggleSubMenu($event)"
      *ngFor="let item of menuItems">
    </ba-menu-item>
  </ul>
  <div class="sidebar-hover-elem" 
       [ngClass]="{'show-hover-elem': showHoverElem }"
       [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"></div>
</aside>
